
//刷新到页面
getApplicantInfo()

// 获取所有的 "查看详情" 按钮
const viewDetailsButtons = document.querySelectorAll('.view-details');

// 为每个按钮添加点击事件监听器
viewDetailsButtons.forEach(button => {
    button.addEventListener('click', function () {
        // 获取当前按钮的父元素（预约申请项）
        const reservationItem = this.parentElement;

        // 获取申请人姓名和预约座位号
        const applicantName = reservationItem.querySelector('span:nth-child(1)').textContent;
        const seatNumber = reservationItem.querySelector('span:nth-child(2)').textContent;

        // 将获取的信息显示在预约详情中
        document.getElementById('applicant-name').textContent = applicantName;
        document.getElementById('seat-number').textContent = seatNumber;

        // 显示预约详情
        document.querySelector('.reservation-details').style.display = 'block';
    });
});

// 获取 "关闭" 按钮
const closeDetailsButton = document.querySelector('.close-details');

// 为 "关闭" 按钮添加点击事件监听器
closeDetailsButton.addEventListener('click', function () {
    // 隐藏预约详情
    document.querySelector('.reservation-details').style.display = 'none';
});

// 从服务器获取申请人信息
function getApplicantInfo() {
    // 获取申请人姓名
    const applicantName = document.getElementById('applicant-name').textContent;

    // 发送请求
    axios.get('/seat/applicantinfo', {
        headers: {
            authorization: localStorage.getItem('token')
        }
    }).then(response => {
        // 获取申请人信息，包括申请人姓名、学号、座位号、邮箱、预约日期、预约时间
        insertPage(response.data.data)
    }).catch(error => {
        console.log(error);
    });
}
//每隔一段时间获取申请人信息
setInterval(() => {
    getApplicantInfo();
}, 2000);

//把获取出的信息显示在页面上
function insertPage(data) {


    // 获取预约列表
    const reservationList = document.querySelector('.reservation-list');

    // 清空预约列表
    reservationList.innerHTML = '';

    // 遍历申请人信息
    data.forEach(item => {
        //从data中获取信息
        // 获取申请人id
        const user_id = item.user_id;
        // 获取申请人姓名
        const applicantName = item.nickname;
        // 获取申请人学号
        const applicantId = item.studentId;
        // 获取申请人邮箱
        const applicantEmail = item.email;
        // 获取预约座位号
        const seatId = item.seat_id;
        // 获取预约开始时间
        const startTime = new Date(item.reservation_date).toLocaleString();

        // 获取预约时长
        const duration = item.reservation_time;
        // 获取预约结束时间
        const endTime = new Date(startTime).getTime() + duration * 60 * 60 * 1000;

        // 将预约结束时间转换为日期字符串
        const date = new Date(endTime);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const endTimeString = `${year}-${month}-${day} ${hours}:${minutes}`;
        // 创建预约申请项
        const reservationItem = document.createElement('li');
        // 设置预约申请项的内容
        reservationItem.innerHTML = `
            <span>${applicantName}</span>
            <span>座位${seatId}</span>
            <span>开始时间：${startTime}</span>
            <span>时长：${duration}小时</span>
            <button class="approve">通过</button>
            <button class="reject">拒绝</button>
            <button class="view-details">查看详情</button>
        `;

        // 获取 "通过" 按钮
        const approveButton = reservationItem.querySelector('.approve');
        // 获取 "拒绝" 按钮
        const rejectButton = reservationItem.querySelector('.reject');
        // 获取 "查看详情" 按钮
        const viewDetailsButton = reservationItem.querySelector('.view-details');

        // 为 "通过" 按钮添加点击事件监听器
        approveButton.addEventListener('click', function () {
            axios.post('/seat/accept', {
                user_id,
                seat_id: seatId,
                reservation_time: duration
            }, {
                headers: {
                    authorization: localStorage.getItem('token')
                }
            }).then(response => {
                alert(response.data.message);
                reservationDetails.style.display = 'none';
            }).catch(error => {
                console.log(error);
            });
        });

        // 为 "拒绝" 按钮添加点击事件监听器

        rejectButton.addEventListener('click', function () {
            // 发送请求
            axios.post('/seat/refuse', {
                user_id
            }, {
                headers: {
                    authorization: localStorage.getItem('token')
                }
            }).then(response => {
                alert(response.data.message);
                reservationDetails.style.display = 'none';
            }).catch(error => {
                console.log(error);
            });
        });

        // 为 "查看详情" 按钮添加点击事件监听器

        viewDetailsButton.addEventListener('click', function () {


            // 获取预约详情
            const reservationDetails = document.querySelector('.reservation-details');

            // 设置预约详情的内容

            reservationDetails.innerHTML = `
                <h3>预约申请详情</h3>
                <p>申请人姓名: <span id="applicant-name">${applicantName}</span></p>
                <p>申请人学号: <span id="applicant-id">${applicantId}</span></p>
                <p>申请人邮箱: <span id="applicant-email">${applicantEmail}</span></p>
                <p>预约座位号: <span id="seat-id">${seatId}</span></p>
                <p>预约开始时间: <span id="start-time">${startTime}</span></p>
                <p>预约时长: <span id="duration">${duration}</span></p>
                <p>预约结束时间: <span id="end-time">${endTimeString}</span></p>
                <button class="close-details">关闭</button>
            `;

            // 显示预约详情
            reservationDetails.style.display = 'block';

            // 获取 "关闭" 按钮
            const closeDetailsButton = reservationDetails.querySelector('.close-details');

            // 为 "关闭" 按钮添加点击事件监听器

            closeDetailsButton.addEventListener('click', function () {
                // 隐藏预约详情
                reservationDetails.style.display = 'none';
            });
        });


        // 将预约申请项添加到预约列表中
        reservationList.appendChild(reservationItem);
    });
}
